<template>
	<view class="contetn">
		<view class="block_1" :style="{ height: (userType == 0 && isquotationType) || (userType == 1 && !isquotationType) ? '440rpx' : '340rpx' }">
			<view class="tit" v-if="(userType == 0 && !isquotationType) || (userType == 1 && isquotationType)"></view>
			<view class="block_1_ads">
				<view class="block_1_top">
					<view class="tx_flex">
						<image v-if="userInfo1.avatar" class="tx" :src="userInfo1.avatar" mode=""></image>
						<image v-else class="tx" src="/static/image@2x.png" mode=""></image>
						<view class="tx_right">
							<view class="name_flex">
								<view class="">
									{{ userInfo1.nickname }}
									<span @click="openpop(userInfo1)">联系信息</span>
								</view>
								<image v-if="userType == 0" :src="orderinfo.quotationType == 1 ? '/static/trad/ch.png' : '/static/trad/sh.png'" mode=""></image>
								<image v-if="userType == 1" :src="orderinfo.quotationType == 1 ? '/static/trad/sh.png' : '/static/trad/ch.png'" mode=""></image>
							</view>
							<!-- 下单方 -->
							<view class="" v-if="userType == 0">
								<view class="text_flex" v-if="isOrderIng && orderinfo.userPayStatus == 0">
									<image class="icon" src="/static/trad/qb.png" mode=""></image>
									待支付押金
								</view>
								<view class="text_flex isgreen" v-if="isOrderIng && orderinfo.userPayStatus == 1 && orderinfo.userFinish == 0 && orderinfo.quotationFinish == 0">
									<image class="icon" src="/static/trad/1.png" mode=""></image>
									已支付押金{{ orderinfo.quotationPrice }}元，可放心交易
								</view>
								<view class="text_flex isg" v-if="isOrderIng && orderinfo.userPayStatus == 1 && orderinfo.userFinish == 0 && orderinfo.quotationFinish == 1">
									<image class="icon" src="/static/trad/6.png" mode=""></image>
									待确认交易完成
								</view>
								<view class="text_flex isgreen" v-if="isOrderIng && orderinfo.userPayStatus == 1 && orderinfo.userFinish == 1 && orderinfo.quotationFinish == 0">
									<image class="icon" src="/static/trad/1.png" mode=""></image>
									已确认交易完成
								</view>

								<!-- 关闭并且没有违约 -->
								<view class="" v-if="!isOrderIng && !isBreachType">
									<view class="text_flex isred" v-if="orderinfo.userPayStatus == 0">
										<image class="icon" src="/static/trad/2.png" mode=""></image>
										未支付押金
									</view>
									<view class="text_flex isgreen" v-if="orderinfo.userPayStatus == 1">
										<image class="icon" src="/static/trad/3.png" mode=""></image>
										押金已原路退回
									</view>
								</view>
								<!-- 关闭并且有违约 -->
								<view class="" v-if="!isOrderIng && isBreachType">
									<view class="text_flex isgreen" v-if="orderinfo.breachType == 0">
										<image class="icon" src="/static/trad/3.png" mode=""></image>
										押金已原路退回并获得赔付
										<span class="spanopen" @click="openpz">查看凭证</span>
									</view>
									<view class="text_flex isred" v-if="orderinfo.breachType == 1">
										<image class="icon" src="/static/trad/2.png" mode=""></image>
										押金已扣除并赔付
										<span class="spanopen" @click="openpz">查看凭证</span>
									</view>
								</view>
							</view>
							<!-- 发布方 -->
							<view class="" v-if="userType == 1">
								<!-- 未关闭 -->
								<view class="text_flex" v-if="isOrderIng && orderinfo.quotationPayStatus == 0">
									<image class="icon" src="/static/trad/qb.png" mode=""></image>
									待支付押金
								</view>
								<view
									class="text_flex"
									style="color: #54bd6a"
									v-if="isOrderIng && orderinfo.quotationPayStatus == 1 && orderinfo.userFinish == 0 && orderinfo.quotationFinish == 0"
								>
									<image class="icon" src="/static/trad/1.png" mode=""></image>
									已支付押金{{ orderinfo.quotationPrice }}元，可放心交易
								</view>
								<view class="text_flex isg" v-if="isOrderIng && orderinfo.quotationPayStatus == 1 && orderinfo.quotationFinish == 0 && orderinfo.userFinish == 1">
									<image class="icon" src="/static/trad/6.png" mode=""></image>
									待确认交易完成
								</view>
								<view
									class="text_flex isgreen"
									v-if="isOrderIng && orderinfo.quotationPayStatus == 1 && orderinfo.quotationFinish == 1 && orderinfo.userFinish == 0"
								>
									<image class="icon" src="/static/trad/1.png" mode=""></image>
									已确认交易完成
								</view>
								<!-- 关闭并且没有违约 -->
								<view class="" v-if="!isOrderIng && !isBreachType">
									<view class="text_flex isred" v-if="orderinfo.quotationPayStatus == 0">
										<image class="icon isred" src="/static/trad/2.png" mode=""></image>
										未支付押金
									</view>
									<view class="text_flex isgreen" v-if="orderinfo.quotationPayStatus == 1">
										<image class="icon" src="/static/trad/3.png" mode=""></image>
										押金已原路退回
									</view>
								</view>
								<!-- 关闭并且有违约 -->
								<view class="" v-if="!isOrderIng && isBreachType">
									<!-- 发布方违约 -->
									<view class="text_flex isgreen" v-if="orderinfo.breachType == 1">
										<image class="icon" src="/static/trad/3.png" mode=""></image>
										押金已原路退回并获得赔付
										<span class="spanopen" @click="openpz">查看凭证</span>
									</view>
									<view class="text_flex isred" v-if="orderinfo.breachType == 0">
										<image class="icon" src="/static/trad/2.png" mode=""></image>
										押金已扣除并赔付
										<span class="spanopen" @click="openpz">查看凭证</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 收货 -->
				<view class="" v-if="(userType == 0 && !isquotationType) || (userType == 1 && isquotationType)">
					<view class="contents" v-if="orderinfo.userPayStatus == 1 && orderinfo.quotationPayStatus == 1">
						<view class="items u-flex u-row-between" @click="goaddress('up')">
							<view class="text_l">角色ID及联系方式</view>
							<view class="">
								<uni-icons type="right"></uni-icons>
							</view>
						</view>
						<view class="items u-flex u-row-between">
							<view class="text_l u-flex u-row-between" @click="open(2)">
								打款凭证
								<uni-icons style="margin-left: 10rpx; margin-top: 5rpx" type="help" color="#AEAEAE"></uni-icons>
							</view>
							<view class="" v-if="userType == 0">
								<view class="" v-if="isOrderIng">
									<view class="" v-if="orderinfo.userFile" @click="goupload('up', 'img', 'look')">
										已上传
										<uni-icons type="right"></uni-icons>
									</view>
									<view class="" v-else style="color: #979797">等待双方上传凭证</view>
								</view>
								<view class="" v-else>
									<view class="" v-if="orderinfo.userFile" @click="goupload('up', 'img', 'look')">
										<uni-icons type="right"></uni-icons>
									</view>
									<view class="" v-else style="color: #979797">未上传</view>
								</view>
							</view>
							<view class="" v-if="userType == 1">
								<view class="" v-if="isOrderIng">
									<view class="" v-if="orderinfo.quotationFile" @click="goupload('up', 'img', 'look')">
										已上传
										<uni-icons type="right"></uni-icons>
									</view>
									<view class="" v-else style="color: #979797">等待双方上传凭证</view>
								</view>
								<view class="" v-else>
									<view class="" v-if="orderinfo.quotationFile" @click="goupload('up', 'img', 'look')">
										<uni-icons type="right"></uni-icons>
									</view>
									<view class="" v-else style="color: #979797">未上传</view>
								</view>
							</view>
						</view>
					</view>
					<view class="kong" v-else style="margin-top: 30rpx">
						<image src="/static/trad/kong.png" mode=""></image>
						<view class="" v-if="isOrderIng">等待双方支付押金后 进入交货打款流程</view>
						<view class="" v-else>
							<view class="" v-if="orderinfo.quotationPayStatus == 0 && orderinfo.userPayStatus == 0">交易关闭 双方未支付押金</view>
							<view class="" v-else>
								<view class="" v-if="userType == 1 && orderinfo.quotationPayStatus == 0">交易关闭 发布方未支付押金</view>
								<view class="" v-if="userType == 0 && orderinfo.userPayStatus == 0">交易关闭 用户方未支付押金</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 出货 -->
				<view class="" v-if="(userType == 0 && isquotationType) || (userType == 1 && !isquotationType)">
					<view class="contents" v-if="orderinfo.userPayStatus == 1 && orderinfo.quotationPayStatus == 1">
						<view class="items u-flex u-row-between" @click="goaddress('up')">
							<view class="text_l">角色ID及联系方式</view>
							<view class="">
								<uni-icons type="right"></uni-icons>
							</view>
						</view>
						<view class="items u-flex u-row-between" @click="gopayment('up')">
							<view class="text_l">收款账户</view>
							<view class="">
								<uni-icons type="right"></uni-icons>
							</view>
						</view>
						<view class="items u-flex u-row-between">
							<view class="text_l u-flex u-row-between" @click="open(1)">
								交货视频
								<uni-icons style="margin-left: 10rpx; margin-top: 5rpx" type="help" color="#AEAEAE"></uni-icons>
							</view>
							<view class="" v-if="userType == 0">
								<view class="" v-if="orderinfo.userFile" @click="goupload('up', 'video', 'look')">
									已上传
									<uni-icons type="right"></uni-icons>
								</view>
								<view class="" v-else style="color: #979797">等待双方上传凭证</view>
							</view>
							<view class="" v-if="userType == 1">
								<view class="" v-if="orderinfo.quotationFile" @click="goupload('up', 'video', 'look')">
									已上传
									<uni-icons type="right"></uni-icons>
								</view>
								<view class="" v-else style="color: #979797">等待双方上传凭证</view>
							</view>
						</view>
					</view>
					<view class="" v-else style="margin-top: 60rpx">
						<view class="kong">
							<image src="/static/trad/kong.png" mode=""></image>
							<view class="" v-if="isOrderIng">等待双方支付押金后 进入交货打款流程</view>
							<view class="" v-else>
								<view class="" v-if="orderinfo.quotationPayStatus == 0 && orderinfo.userPayStatus == 0">交易关闭 双方未支付押金</view>
								<view class="" v-else>
									<view class="" v-if="userType == 1 && orderinfo.quotationPayStatus == 0">交易关闭 发布方未支付押金</view>
									<view class="" v-if="userType == 0 && orderinfo.userPayStatus == 0">交易关闭 用户方未支付押金</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="block_s">
			<view class="tit">
				<view class="tit_left" @click="open">
					<view class="">
						{{ datas.safeOrderTitle }}
					</view>
					<uni-icons style="margin-left: 10rpx" type="help" color="#fff"></uni-icons>
				</view>
				<view class="text_right" v-if="isOrderIng && (orderinfo.quotationPayStatus == 0 || orderinfo.userPayStatus == 0)">{{ displayTime }}关闭交易</view>
			</view>
			<view class="tit_cent">
				<view class="u-flex u-row-between">
					<view class="u-flex ut1">
						交易号 {{ orderinfo.orderNumber }}
						<view class="btn" @click="$copyFun(orderinfo.orderNumber)">复制</view>
					</view>
					<view class="price">
						合计
						<span>￥</span>
						{{ orderinfo.amountTotal }}
					</view>
				</view>
				<view class="tit_cent1 u-flex u-row-between">
					<view class="u-flex tit_left">
						<image v-if="orderinfo.quotationImage" @click="$previewImage([orderinfo.quotationImage])" :src="orderinfo.quotationImage" mode="aspectFill"></image>
						<image :src="webconfigImg" mode="aspectFill" v-else></image>
						<view class="name">
							{{ orderinfo.quotationName }}
						</view>
					</view>
					<view class="tit_right">
						<view class="">押金 ￥{{ orderinfo.quotationPrice }}</view>
						<view class="">交易系统费 ￥{{ orderinfo.amountService }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="block_1" :style="{ height: (userType == 1 && isquotationType) || (userType == 0 && !isquotationType) ? '440rpx' : '340rpx' }">
			<view class="tit" v-if="(userType == 0 && isquotationType) || (userType == 1 && !isquotationType)"></view>
			<view class="block_1_ads">
				<view class="block_1_top">
					<view class="tx_flex">
						<image v-if="userInfo.avatar" class="tx" :src="userInfo.avatar" mode=""></image>
						<image v-else class="tx" src="/static/image@2x.png" mode=""></image>
						<view class="tx_right">
							<view class="name_flex">
								<view class="">
									{{ userInfo.nickname }}
									<span @click="openpop(userInfo)">联系信息</span>
								</view>
								<image v-if="userType == 0" :src="orderinfo.quotationType == 1 ? '/static/trad/sh.png' : '/static/trad/ch.png'" mode=""></image>
								<image v-if="userType == 1" :src="orderinfo.quotationType == 1 ? '/static/trad/ch.png' : '/static/trad/sh.png'" mode=""></image>
							</view>
							<!-- 发布方 -->
							<view class="" v-if="userType == 0">
								<!-- 未关闭 -->
								<view class="text_flex" v-if="isOrderIng && orderinfo.quotationPayStatus == 0">
									<image class="icon" src="/static/trad/qb.png" mode=""></image>
									待支付押金
								</view>
								<view
									class="text_flex"
									style="color: #54bd6a"
									v-if="isOrderIng && orderinfo.quotationPayStatus == 1 && orderinfo.userFinish == 0 && orderinfo.quotationFinish == 0"
								>
									<image class="icon" src="/static/trad/1.png" mode=""></image>
									已支付押金{{ orderinfo.quotationPrice }}元，可放心交易
								</view>
								<view class="text_flex isg" v-if="isOrderIng && orderinfo.quotationPayStatus == 1 && orderinfo.quotationFinish == 0 && orderinfo.userFinish == 1">
									<image class="icon" src="/static/trad/6.png" mode=""></image>
									待确认交易完成
								</view>
								<view
									class="text_flex isgreen"
									v-if="isOrderIng && orderinfo.quotationPayStatus == 1 && orderinfo.quotationFinish == 1 && orderinfo.userFinish == 0"
								>
									<image class="icon" src="/static/trad/1.png" mode=""></image>
									已确认交易完成
								</view>
								<!-- 关闭并且没有违约 -->
								<view class="" v-if="!isOrderIng && !isBreachType">
									<view class="text_flex isred" v-if="orderinfo.quotationPayStatus == 0">
										<image class="icon isred" src="/static/trad/2.png" mode=""></image>
										未支付押金
									</view>
									<view class="text_flex isgreen" v-if="orderinfo.quotationPayStatus == 1">
										<image class="icon" src="/static/trad/3.png" mode=""></image>
										押金已原路退回
									</view>
								</view>
								<!-- 关闭并且有违约 -->
								<view class="" v-if="!isOrderIng && isBreachType">
									<!-- 发布方违约 -->
									<view class="text_flex isgreen" v-if="orderinfo.breachType == 1">
										<image class="icon" src="/static/trad/3.png" mode=""></image>
										押金已原路退回并获得赔付
										<span class="spanopen" @click="openpz">查看凭证</span>
									</view>
									<view class="text_flex isred" v-if="orderinfo.breachType == 0">
										<image class="icon" src="/static/trad/2.png" mode=""></image>
										押金已扣除并赔付
										<span class="spanopen" @click="openpz">查看凭证</span>
									</view>
								</view>
							</view>

							<!-- 下单方 -->
							<view class="" v-if="userType == 1">
								<view class="">
									<view class="text_flex" v-if="isOrderIng && orderinfo.userPayStatus == 0">
										<image class="icon" src="/static/trad/qb.png" mode=""></image>
										待支付押金
									</view>
									<view
										class="text_flex isgreen"
										v-if="isOrderIng && orderinfo.userPayStatus == 1 && orderinfo.userFinish == 0 && orderinfo.quotationFinish == 0"
									>
										<image class="icon" src="/static/trad/1.png" mode=""></image>
										已支付押金{{ orderinfo.quotationPrice }}元，可放心交易
									</view>
									<view class="text_flex isg" v-if="isOrderIng && orderinfo.userPayStatus == 1 && orderinfo.userFinish == 0 && orderinfo.quotationFinish == 1">
										<image class="icon" src="/static/trad/6.png" mode=""></image>
										待确认交易完成
									</view>
									<view
										class="text_flex isgreen"
										v-if="isOrderIng && orderinfo.userPayStatus == 1 && orderinfo.userFinish == 1 && orderinfo.quotationFinish == 0"
									>
										<image class="icon" src="/static/trad/1.png" mode=""></image>
										已确认交易完成
									</view>
								</view>
								<!-- 关闭并且没有违约 -->
								<view class="" v-if="!isOrderIng && !isBreachType">
									<view class="text_flex isred" v-if="orderinfo.userPayStatus == 0">
										<image class="icon" src="/static/trad/2.png" mode=""></image>
										未支付押金
									</view>
									<view class="text_flex isgreen" v-if="orderinfo.userPayStatus == 1">
										<image class="icon" src="/static/trad/3.png" mode=""></image>
										押金已原路退回
									</view>
								</view>
								<!-- 关闭并且有违约 -->
								<view class="" v-if="!isOrderIng && isBreachType">
									<view class="text_flex isgreen" v-if="orderinfo.breachType == 0">
										<image class="icon" src="/static/trad/3.png" mode=""></image>
										押金已原路退回并获得赔付
										<span class="spanopen" @click="openpz">查看凭证</span>
									</view>
									<view class="text_flex isred" v-if="orderinfo.breachType == 1">
										<image class="icon" src="/static/trad/2.png" mode=""></image>
										押金已扣除并赔付
										<span class="spanopen" @click="openpz">查看凭证</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 收货 -->
				<view class="" v-if="(userType == 0 && isquotationType) || (userType == 1 && !isquotationType)">
					<view class="contents">
						<view class="items u-flex u-row-between">
							<view class="text_l">角色ID及联系方式</view>
							<view class="" v-if="userType == 0" @click="goaddress('down')">
								<view class="" v-if="!isOrderIng">
									<uni-icons type="right"></uni-icons>
								</view>
								<view class="" v-else>
									<uni-icons type="right" v-if="orderinfo.quotationGameZone && orderinfo.quotationPayStatus == 1"></uni-icons>
									<view class="btn" v-if="orderinfo.quotationGameZone == null || ''">去填写</view>
									<view class="btn" v-if="orderinfo.quotationGameZone && orderinfo.quotationPayStatus == 0">修改</view>
								</view>
							</view>
							<view class="" v-if="userType == 1" @click="goaddress('down')">
								<view class="" v-if="!isOrderIng">
									<uni-icons type="right"></uni-icons>
								</view>
								<view class="" v-else>
									<uni-icons type="right" v-if="orderinfo.userGameZone && orderinfo.userPayStatus == 1"></uni-icons>

									<view class="btn" v-if="orderinfo.userGameZone == null || ''">去填写</view>
									<view class="btn" v-if="orderinfo.userGameZone && orderinfo.userPayStatus == 0">修改</view>
								</view>
							</view>
						</view>
						<view class="items u-flex u-row-between">
							<view class="text_l u-flex u-row-between" @click="open(2)">
								打款凭证
								<uni-icons style="margin-left: 10rpx; margin-top: 5rpx" type="help" color="#AEAEAE"></uni-icons>
							</view>
							<view class="">
								<view style="color: #979797" class="" v-if="orderinfo.quotationPayStatus == 0 || orderinfo.userPayStatus == 0">等待双方支付押金</view>
								<view class="" v-else>
									<view class="" v-if="userType == 0">
										<view class="" v-if="!isOrderIng" @click="goupload('down', 'img', 'look')">
											<uni-icons type="right"></uni-icons>
										</view>
										<view class="" v-else @click="goupload('down', 'img', 'handle')">
											<uni-icons type="right" v-if="orderinfo.quotationFinish == 1"></uni-icons>
											<view class="" v-else>
												<view class="btn" v-if="orderinfo.quotationFile">修改</view>
												<view class="btn" v-else>开始打款</view>
											</view>
										</view>
									</view>
									<view class="" v-if="userType == 1">
										<view class="" v-if="!isOrderIng" @click="goupload('down', 'img', 'look')">
											<uni-icons type="right"></uni-icons>
										</view>
										<view class="" v-else @click="goupload('down', 'img', 'handle')">
											<uni-icons type="right" v-if="orderinfo.userFinish == 1"></uni-icons>
											<view class="" v-else>
												<view class="btn" v-if="orderinfo.userFile">修改</view>
												<view class="btn" v-else>开始打款</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 出货 -->
				<view class="" v-if="(userType == 0 && !isquotationType) || (userType == 1 && isquotationType)">
					<view class="contents">
						<view class="items u-flex u-row-between">
							<view class="text_l">角色ID及联系方式</view>
							<view class="" v-if="userType == 0" @click="goaddress('down')">
								<view class="" v-if="!isOrderIng">
									<uni-icons type="right"></uni-icons>
								</view>
								<view class="" v-else>
									<uni-icons type="right" v-if="orderinfo.quotationGameZone && orderinfo.quotationPayStatus == 1"></uni-icons>
									<view class="btn" v-if="orderinfo.quotationGameZone == null || ''">去填写</view>
									<view class="btn" v-if="orderinfo.quotationGameZone && orderinfo.quotationPayStatus == 0">修改</view>
								</view>
							</view>
							<view class="" v-if="userType == 1" @click="goaddress('down')">
								<view class="" v-if="!isOrderIng">
									<uni-icons type="right"></uni-icons>
								</view>
								<view class="" v-else>
									<uni-icons type="right" v-if="orderinfo.userGameZone && orderinfo.userPayStatus == 1"></uni-icons>

									<view class="btn" v-if="orderinfo.userGameZone == null || ''">去填写</view>
									<view class="btn" v-if="orderinfo.userGameZone && orderinfo.userPayStatus == 0">修改</view>
								</view>
							</view>
						</view>
						<!-- paymentType -->
						<view class="items u-flex u-row-between">
							<view class="text_l">收款账户 {{ orderinfo.userPayStatus }}</view>
							<view class="" @click="gopayment('down')">
								<view class="" v-if="!isOrderIng">
									<uni-icons type="right"></uni-icons>
								</view>
								<view class="" v-else>
									<uni-icons type="right" v-if="orderinfo.paymentType && orderinfo.userPayStatus == 1"></uni-icons>
									<view class="btn" v-if="orderinfo.paymentType == null || ''">去填写</view>
									<view class="btn" v-if="orderinfo.paymentType && orderinfo.userPayStatus == 0">修改</view>
								</view>
							</view>
						</view>
						<!-- userFile -->
						<view class="items u-flex u-row-between">
							<view class="text_l u-flex u-row-between" @click="open(1)">
								交货视频
								<uni-icons style="margin-left: 10rpx; margin-top: 5rpx" type="help" color="#AEAEAE"></uni-icons>
							</view>
							<view class="">
								<view class="" style="color: #979797" v-if="orderinfo.quotationPayStatus == 0 || orderinfo.userPayStatus == 0">等待双方支付押金</view>
								<view class="" v-else>
									<view class="" v-if="userType == 0">
										<view class="" v-if="!isOrderIng" @click="goupload('down', 'video', 'look')">
											<uni-icons type="right"></uni-icons>
										</view>
										<view class="" v-else @click="goupload('down', 'video', 'handle')">
											<uni-icons type="right" v-if="orderinfo.quotationFinish == 1"></uni-icons>
											<view class="" v-else>
												<view class="btn" v-if="orderinfo.quotationFile">修改</view>
												<view class="btn" v-else>开始交货</view>
											</view>
										</view>
									</view>
									<view class="" v-if="userType == 1">
										<view class="" v-if="!isOrderIng" @click="goupload('down', 'video', 'look')">
											<uni-icons type="right"></uni-icons>
										</view>
										<view class="" v-else @click="goupload('down', 'video', 'handle')">
											<uni-icons type="right" v-if="orderinfo.userFinish == 1"></uni-icons>
											<view class="" v-else>
												<view class="btn" v-if="orderinfo.userFile">修改</view>
												<view class="btn" v-else>开始交货</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer_btns" v-if="isOrderIng">
			<view class="cont">
				<!-- 合并 userType 0 和 1 的共用逻辑 -->
				<view>
					<view class="btn" v-if="isShowInfo" @click="goaddress('down')">填写角色ID及联系方式</view>

					<view class="btn" v-if="isShowShou" @click="gopayment('down')">添加收款账户</view>
					<!-- 支付押金按钮 (根据用户类型显示不同条件) -->
					<view class="btn" @click="createOrder" v-if="isShowPayButton">支付押金及系统费用</view>

					<!-- 更新对方押金状态 -->
					<view class="btn" @click="refresh(1)" v-if="isShowRefreshDeposit">更新对方押金状态</view>
					<!-- 刷新对方凭证状态 -->
					<view class="btn" @click="refresh" v-if="isShowRefreshProof">
						<span v-if="userType == 0">
							{{ orderinfo.quotationType == 1 ? '更新对方交货凭证' : '更新对方打款凭证' }}
						</span>
						<span v-if="userType == 1">
							{{ orderinfo.quotationType == 1 ? '更新对方打款凭证' : '更新对方交货凭证' }}
						</span>
					</view>
					<view class="btn" v-if="isshowBtn">
						<view v-if="userType == 0">
							<view v-if="orderinfo.quotationType == 1" @click="goupload('down', 'img', 'handle')">上传打款凭证</view>
							<view v-else @click="goupload('down', 'video', 'handle')">上传交货视频</view>
						</view>
						<view v-if="userType == 1">
							<view v-if="orderinfo.quotationType == 1" @click="goupload('down', 'video', 'handle')">上传交货视频</view>
							<view v-else @click="goupload('down', 'img', 'handle')">上传打款凭证</view>
						</view>
					</view>
					<!-- v-if="isShowCompleteButton" -->
					<!-- 交易完成按钮 -->
					<view class="btn" v-if="isShowCompleteButton" @click="ok">交易完成</view>
					<!-- 取消交易按钮 (共用条件) -->
					<view class="btn1" @click="handleQXJY()" v-if="!isBothPaid">取消交易</view>
					<!-- 申请维权按钮 (共用条件) -->
					<view class="btn1" v-if="isShowRightsButton">
						<button class="bbb" open-type="contact">对方疑似违约，申请维权</button>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup11" type="center">
			<view class="popup1">
				<view class="title" style="margin-top: 30rpx">提示</view>
				<view class="icon" @click="close">
					<uni-icons size="24" type="closeempty"></uni-icons>
				</view>
				<view class="sbutit" style="margin-top: 30rpx">对方还未支付押金，无法进行下一步， 您可联系对方催促</view>
				<view class="itt" v-if="userType == 1">
					<view class="flex">
						微信号：{{ orderinfo.quotationWechat }}
						<view class="xb" @click="$copyFun(orderinfo.quotationWechat)">复制</view>
					</view>
					<view class="flex" style="margin-top: 20rpx">
						手机号：{{ orderinfo.quotationPhone }}
						<view class="xb" @click="$copyFun(orderinfo.quotationPhone)">复制</view>
					</view>
				</view>
				<view class="itt" v-if="userType == 0">
					<view class="flex">
						微信号： {{ orderinfo.userWechat }}
						<view class="xb" @click="$copyFun(orderinfo.userWechat)">复制</view>
					</view>
					<view class="flex" style="margin-top: 20rpx">
						手机号： {{ orderinfo.userPhone }}
						<view class="xb" @click="$copyFun(orderinfo.userPhone)">复制</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" type="center">
			<view class="popup1">
				<view class="title">
					{{ title }}
				</view>
				<view class="icon" @click="close">
					<uni-icons size="24" type="closeempty"></uni-icons>
				</view>
				<view class="content">
					<view class="" v-html="html"></view>
				</view>
				<view class="btn" @click="close">我知道了</view>
			</view>
		</uni-popup>
		<uni-popup ref="popuptest" type="center">
			<view class="popuptest">
				<view class="title">
					{{ utitle }}
				</view>
				<view class="icon" @click="close">
					<uni-icons size="24" type="closeempty"></uni-icons>
				</view>
				<view class="content">
					{{ orderinfo.breachRemark }}
				</view>
				<view class="">
					<view class="tit">违约凭证</view>
					<view class="imgList">
						<view class="items" v-for="(item, index) in breachFileList" :key="index">
							<view class="ivideo" v-if="item.type == 'video'">
								<video :src="item.link" :ref="`video${index}`" controls style="max-width: 400px; display: none"></video>
								<image :src="item.fullPath" mode="aspectFill"></image>
								<view class="ivideo_ads" @click="playFullscreenVideo(item)">
									<image src="/static/trad/video.png" mode=""></image>
								</view>
							</view>
							<image v-if="item.type == 'image'" :src="item.link" mode="aspectFill" @click="$previewImage([item.link])"></image>
						</view>
					</view>
				</view>
				<view class="">
					<view class="tit">赔偿凭证</view>
					<view class="imgList">
						<view class="items" v-for="(item, index) in breachRedressList" :key="index">
							<view class="ivideo" v-if="item.type == 'video'">
								<video :src="item.link" :ref="`video${index}`" controls style="max-width: 400px; display: none"></video>
								<image :src="item.fullPath" mode="aspectFill"></image>
								<view class="ivideo_ads" @click="playFullscreenVideo(item)">
									<image src="/static/trad/video.png" mode=""></image>
								</view>
							</view>
							<image v-if="item.type == 'image'" :src="item.link" mode="aspectFill" @click="$previewImage([item.link])"></image>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupvideo" type="center">
			<view class="videoads">
				<video id="videoPlayer" ref="videoPlayer" :src="videoUrl" :controls="true" :show-fullscreen-btn="true" :show-play-btn="true" :enable-progress-gesture="true" />
			</view>
		</uni-popup>
		<uni-popup ref="popupWxchat" type="center">
			<view class="popup1">
				<view class="title">联系信息</view>
				<view class="icon" @click="close">
					<uni-icons size="24" type="closeempty"></uni-icons>
				</view>
				<view class="itt">
					<view class="flex">
						微信号： {{ wxchat }}
						<view class="xb" @click="$copyFun(wxchat)">复制</view>
					</view>
					<view class="flex" style="margin-top: 20rpx">
						手机号： {{ phone }}
						<view class="xb" @click="$copyFun(phone)">复制</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupQueren" type="center">
			<view class="popup1">
				<view class="title">交易提示</view>
				<view class="icon" @click="close">
					<uni-icons size="24" type="closeempty"></uni-icons>
				</view>

				<view class="conts u-flex">
					<image src="/static/trad/ddd.png" mode=""></image>
					<view class="tss">您是否确认本次交易已完成且不存在任何纠纷，双方均确认后平台将退回押金！</view>
				</view>

				<view class="texts">
					请手动输入
					<span>“确认”</span>
					，完成验证
				</view>

				<view class="input">
					<input placeholder-style="color:#D1D1D6" v-model="okvalue" type="text" placeholder="请输入" />
				</view>

				<view class="btnss u-flex u-row-between">
					<view class="b_l bt" @click="close">取消</view>
					<view class="b_r bt" @click="handleok">完成</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { webconfig, createOrderinfo, cancelOrder, payPrice, yesOrder, getEidToken } from '@/common/http.api.js';
export default {
	data() {
		return {
			webconfigImg: uni.getStorageSync('webconfig').productDefaultImage,
			orderinfo: {},
			userType: 1,

			userInfo: {},
			userInfo1: {},

			displayTime: '',
			timer: null,
			id: 0,

			title: '',
			html: '',
			datas: {},
			breachFileList: [],
			breachRedressList: [],
			videoUrl: '',
			isshowvideo: false,
			utitle: '',

			wxchat: '',
			phone: '',
			okvalue: ''
		};
	},
	computed: {
		// 是谁违约
		iswho() {
			let id = uni.getStorageSync('userInfo').id;
			// breachType == 0 发布方
			if (id == this.orderinfo.userId && this.orderinfo.breachType == 1) {
				// 我方
				return '我方违约';
			} else if (id == this.orderinfo.quotationUserId && this.orderinfo.breachType == 0) {
				// 我方
				return '我方违约';
			} else {
				// 	// 对方
				return '对方违约';
			}
		},
		// 是否违约
		isBreachType() {
			return this.orderinfo.breachType == 0 || this.orderinfo.breachType == 1;
		},
		// 判断是否进行中
		isOrderIng() {
			return this.orderinfo.orderIng == 1 && this.orderinfo.cancelStatus == 0;
		},
		// 判断是否显示填写信息按钮  出货方收货方没填写的时候显示
		isShowInfo() {
			//userType 0 发布方 quotationUserId     1用户userId
			// isquotationType 1 收购 2 出售
			if (this.userType == 0) {
				// quotationUserId就用q的数据
				if (this.isquotationType) {
					return !this.orderinfo.quotationGameZone;
				} else {
					return !this.orderinfo.quotationGameZone;
				}
			} else {
				if (this.isquotationType) {
					return !this.orderinfo.userGameZone;
				} else {
					return !this.orderinfo.userGameZone;
				}
				// return !this.orderinfo.userGameZone;
			}
		},
		// 判断是否显示填写收款按钮  出货方才用填写
		isShowShou() {
			if (this.userType == 0) {
				if (this.isquotationType) {
					return false;
				} else {
					return !this.orderinfo.paymentType && this.orderinfo.quotationGameZone;
				}
			} else {
				if (this.isquotationType) {
					return !this.orderinfo.paymentType && this.orderinfo.userGameZone;
				} else {
					return false;
				}
			}
		},
		// 判断是否显示支付按钮
		isShowPayButton() {
			if (this.userType === 0) {
				if (this.isquotationType) {
					return this.orderinfo.quotationPayStatus === 0 && this.orderinfo.quotationGameZone;
				} else {
					return this.orderinfo.quotationPayStatus === 0 && this.orderinfo.quotationGameZone && this.orderinfo.paymentType;
				}
			} else {
				if (this.isquotationType) {
					return this.orderinfo.userPayStatus === 0 && this.orderinfo.userGameZone && this.orderinfo.paymentType;
				} else {
					return this.orderinfo.userPayStatus === 0 && this.orderinfo.userGameZone;
				}
			}
		},
		// 判断是否显示刷新押金状态按钮
		isShowRefreshDeposit() {
			if (this.userType === 0) {
				return this.orderinfo.quotationPayStatus === 1 && this.orderinfo.userPayStatus === 0;
			} else {
				return this.orderinfo.userPayStatus === 1 && this.orderinfo.quotationPayStatus === 0;
			}
		},

		// 判断是否显示刷新凭证状态按钮
		isShowRefreshProof() {
			if (this.userType === 0) {
				return this.isBothPaid && this.orderinfo.quotationFile && !this.orderinfo.userFile;
			} else {
				return this.isBothPaid && this.orderinfo.userFile && !this.orderinfo.quotationFile;
			}
		},
		// 判断是否显示交易完成按钮
		isShowCompleteButton() {
			if (this.userType === 0) {
				return this.isBothPaid && this.orderinfo.userFile && this.orderinfo.quotationFile && this.orderinfo.quotationFinish === 0;
			} else {
				return this.isBothPaid && this.orderinfo.quotationFile && this.orderinfo.userFile && this.orderinfo.userFinish === 0;
			}
		},
		isshowBtn() {
			if (this.userType === 0) {
				return this.orderinfo.quotationFile == null && this.isBothPaid;
			} else {
				return this.orderinfo.userFile == null && this.isBothPaid;
			}
		},
		// 判断是否显示维权按钮
		isShowRightsButton() {
			return this.isBothPaid && (this.orderinfo.quotationFinish != 1 || this.orderinfo.userFinish != 1);
		},
		// 通用条件：双方是否都已支付押金
		isBothPaid() {
			return this.orderinfo.quotationPayStatus === 1 && this.orderinfo.userPayStatus === 1;
		},
		isquotationType() {
			return this.orderinfo.quotationType == 1;
		},
		isOn() {
			// quotationGameZone  userGameZone
			if (this.userType == 0) {
				if (this.isquotationType) {
					return this.orderinfo.quotationGameZone == null;
				} else {
					return this.orderinfo.quotationGameZone == null || this.orderinfo.paymentType == null;
				}
			}
			if (this.userType == 1) {
				if (this.isquotationType) {
					return this.orderinfo.userGameZone == null || this.orderinfo.paymentType == null;
				} else {
					return this.orderinfo.userGameZone == null;
				}
			}
		}
	},
	onPullDownRefresh() {
		this.getinfo();
		setTimeout(() => {
			uni.stopPullDownRefresh(); // 停止下拉刷新动画
		});
	},
	onLoad(option) {
		this.id = option.id;
		this.getinfo();
		this.getwebconfig();
	},
	onShow() {
		this.getinfo();
	},
	methods: {
		// 播放/暂停视频
		async playFullscreenVideo(item) {
			this.videoUrl = item.link;
			this.isshowvideo = true;
			if (!this.videoUrl) {
				uni.showToast({
					title: '视频链接不能为空',
					icon: 'none'
				});
				return;
			}
			this.$refs.popupvideo.open();
		},
		// 查看凭证
		openpz() {
			this.utitle = this.iswho;
			this.breachFileList = this.classifyLinks(this.orderinfo.breachFile);
			this.breachRedressList = this.classifyLinks(this.orderinfo.breachRedress);
			this.$refs.popuptest.open();
		},
		classifyLinks(linksStr) {
			// 处理空字符串情况
			if (!linksStr) return [];

			// 分割链接并去除首尾空格
			const links = linksStr
				.split(',')
				.map((link) => link.trim())
				.filter((link) => link);

			// 定义文件类型及其对应的分类
			const typeMap = {
				mp4: 'video',
				png: 'image',
				jpg: 'image',
				jpeg: 'image'
			};

			// 视频处理参数
			const videoParam = '?x-oss-process=video/snapshot,t_1,f_jpg,w_80,h_80,m_fast';

			// 处理每个链接
			return links.map((link) => {
				// 提取文件扩展名（不区分大小写）
				const extMatch = link.match(/\.([a-zA-Z0-9]+)$/);
				if (!extMatch) {
					return {
						link,
						type: 'unknown'
					};
				}

				const extension = extMatch[1].toLowerCase();
				// 根据扩展名匹配类型
				const type = typeMap[extension] || 'unknown';

				// 如果是视频，添加完整路径
				if (type === 'video') {
					return {
						link,
						type,
						fullPath: `${link}${videoParam}` // 原路径加上处理参数
					};
				}

				// 图片类型只返回基础信息
				return {
					link,
					type
				};
			});
		},
		open(type) {
			console.log(type);
			if (type == 1) {
				this.title = '交货凭证说明';
				this.html = this.datas.safeOrderFile;
				this.$refs.popup.open();
			} else if (type == 2) {
				this.title = '打款凭证说明';
				this.html = this.datas.safeOrderFilePay;
				this.$refs.popup.open();
			} else {
				this.title = this.datas.safeOrderTitle;
				this.html = this.datas.safeOrderRemark;
				this.$refs.popup.open();
			}
		},
		close() {
			this.$refs.popup.close();
			this.$refs.popup11.close();
			this.$refs.popuptest.close();
			this.$refs.popupWxchat.close();
			this.$refs.popupQueren.close();
		},
		getwebconfig() {
			webconfig({}).then((res) => {
				if (res.code == 200) {
					this.datas = res.data;
				}
			});
		},
		ok() {
			this.$refs.popupQueren.open();
		},
		handleok() {
			if (this.okvalue == '确认') {
				yesOrder(this.id).then((yes) => {
					if (yes.code == 200) {
						this.close();
						this.$modal.msgSuccess('交易完成');
						this.getinfo();
					}
				});
			} else {
				uni.showToast({
					title: '输入错误',
					icon: 'none'
				});
			}
		},
		refresh(type) {
			uni.showLoading({
				title: '最新状态...'
			});
			if (this.timer) {
				clearInterval(this.timer);
			}
			createOrderinfo(this.id).then((res) => {
				if (res.code == 200) {
					this.orderinfo = res.data.order;
					this.userType = res.data.userType;
					this.startCountdown(res.data.closeTimeSecond);
					if (res.data.userType == 1) {
						this.userInfo = res.data.user;
						this.userInfo1 = res.data.quotationUser;
					} else {
						this.userInfo = res.data.quotationUser;
						this.userInfo1 = res.data.user;
					}
					if (type == 1) {
						// 不管是什么角色 只要状态没有那就显示提示框
						if (res.data.order.userPayStatus == 0) {
							this.$refs.popup11.open();
						}
						if (res.data.order.quotationPayStatus == 0) {
							this.$refs.popup11.open();
						}
					}
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
				}
			});
		},
		getinfo() {
			if (this.timer) {
				clearInterval(this.timer);
			}
			createOrderinfo(this.id).then((res) => {
				if (res.code == 200) {
					this.orderinfo = res.data.order;
					this.userType = res.data.userType;
					this.startCountdown(res.data.closeTimeSecond);
					if (res.data.userType == 1) {
						this.userInfo = res.data.user;
						this.userInfo1 = res.data.quotationUser;
					} else {
						this.userInfo = res.data.quotationUser;
						this.userInfo1 = res.data.user;
					}
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
				}
			});
		},
		// 支付保证金
		createOrder() {
			let that = this;
			if (that.isOn) return;
			uni.showLoading({
				title: '支付拉起中...'
			});
			payPrice(that.id).then((res) => {
				if (res.code == 200) {
					uni.hideLoading();
					uni.requestPayment({
						provider: 'wxpay', // 服务提提供商
						appid: res.data.appId,
						timeStamp: res.data.timeStamp, // 时间戳
						nonceStr: res.data.nonceStr, // 随机字符串
						package: res.data.packageVal,
						signType: res.data.signType, // 签名算法
						paySign: res.data.paySign, // 签名
						success: function (res) {
							uni.showToast({
								title: '支付成功',
								duration: 2000,
								mask: false,
								icon: 'none'
							});
							that.getinfo();
						},
						fail: function (err) {
							console.log('支付失败', err);
							uni.hideLoading();
							uni.showToast({
								title: '支付取消',
								icon: 'none'
							});
						}
					});
				}
			});
		},
		// 在Vue组件的methods中
		startCountdown(initialSeconds) {
			let remainingSeconds = initialSeconds;

			this.timer = setInterval(() => {
				if (remainingSeconds <= 0) {
					clearInterval(this.timer);
					return;
				}
				remainingSeconds--;
				const timeObj = this.formatSeconds(remainingSeconds);
				// 更新到data中用于视图展示
				this.displayTime = timeObj.formatted;
			}, 1000);
		},
		formatSeconds(seconds) {
			// 确保输入为非负整数
			const totalSeconds = Math.max(0, Math.floor(seconds));

			// 计算小时、分钟和剩余秒数
			const hours = Math.floor(totalSeconds / 3600);
			const minutes = Math.floor((totalSeconds % 3600) / 60);
			const secs = totalSeconds % 60;

			// 返回格式化后的结果，包含原始数值和补零后的字符串
			return {
				hours,
				minutes,
				seconds: secs,
				// 补零后的字符串形式，便于直接展示
				formatted: `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
			};
		},
		handleQXJY() {
			let that = this;
			uni.showModal({
				title: '取消提示',
				content: '是否确认取消本次交易？',
				success: function (res) {
					if (res.confirm) {
						cancelOrder(that.orderinfo.id).then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: '已取消交易',
									icon: 'none'
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 500);
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		// 凭证
		goupload(ins, type, uptype) {
			let obj = {
				id: this.orderinfo.id,
				type,
				uptype,
				gameZone: '',
				account: '',
				wechat: '',
				phone: '',
				paymentName: this.orderinfo.paymentName,
				paymentBankChild: this.orderinfo.paymentBankChild,
				paymentBank: this.orderinfo.paymentBank,
				paymentAccount: this.orderinfo.paymentAccount,
				paymentType: this.orderinfo.paymentType,
				safeOrderFilePay: this.datas.safeOrderFilePay,
				safeOrderFile: this.datas.safeOrderFile
			};
			if (this.orderinfo.orderIng == 0 || this.orderinfo.cancelStatus == 1) {
				obj.uptype = 'look';
			}

			if (this.userType == 0) {
				if (ins == 'down') {
					obj.file = this.orderinfo.quotationFile;
					obj.gameZone = this.orderinfo.userGameZone;
					obj.account = this.orderinfo.userAccount;
					obj.wechat = this.orderinfo.userWechat;
					obj.phone = this.orderinfo.userPhone;
				} else {
					obj.file = this.orderinfo.userFile;
					obj.gameZone = this.orderinfo.quotationGameZone;
					obj.account = this.orderinfo.quotationAccount;
					obj.wechat = this.orderinfo.quotationWechat;
					obj.phone = this.orderinfo.quotationPhone;
				}
			}
			if (this.userType == 1) {
				if (ins == 'down') {
					obj.file = this.orderinfo.userFile;
					obj.gameZone = this.orderinfo.quotationGameZone;
					obj.account = this.orderinfo.quotationAccount;
					obj.wechat = this.orderinfo.quotationWechat;
					obj.phone = this.orderinfo.quotationPhone;
				} else {
					obj.file = this.orderinfo.quotationFile;
					obj.gameZone = this.orderinfo.userGameZone;
					obj.account = this.orderinfo.userAccount;
					obj.wechat = this.orderinfo.userWechat;
					obj.phone = this.orderinfo.userPhone;
				}
			}
			uni.setStorageSync('setupload', obj);
			uni.navigateTo({
				url: `/pages/index/newpage/setupload`
			});
		},
		// 角色ID及联系方式
		goaddress(ins) {
			let type = '';
			if (!this.isOrderIng) {
				type = 'look';
			} else if (ins == 'up') {
				type = 'look';
			} else if (ins == 'down' && this.orderinfo.quotationPayStatus == 1 && this.orderinfo.userPayStatus == 1) {
				type = 'look';
			} else {
				type = 'handle';
			}
			let obj = {
				id: this.orderinfo.id,
				type
			};
			if (this.userType == 0) {
				if (ins == 'down') {
					obj.gameZone = this.orderinfo.quotationGameZone;
					obj.account = this.orderinfo.quotationAccount;
					obj.wechat = this.orderinfo.quotationWechat;
					obj.phone = this.orderinfo.quotationPhone;
				} else {
					obj.gameZone = this.orderinfo.userGameZone;
					obj.account = this.orderinfo.userAccount;
					obj.wechat = this.orderinfo.userWechat;
					obj.phone = this.orderinfo.userPhone;
				}
			}
			if (this.userType == 1) {
				if (ins == 'down') {
					obj.gameZone = this.orderinfo.userGameZone;
					obj.account = this.orderinfo.userAccount;
					obj.wechat = this.orderinfo.userWechat;
					obj.phone = this.orderinfo.userPhone;
				} else {
					obj.gameZone = this.orderinfo.quotationGameZone;
					obj.account = this.orderinfo.quotationAccount;
					obj.wechat = this.orderinfo.quotationWechat;
					obj.phone = this.orderinfo.quotationPhone;
				}
			}
			uni.navigateTo({
				url: `/pages/index/newpage/setaddress?obj=` + encodeURIComponent(JSON.stringify(obj))
			});
		},
		gopayment(ins) {
			let type = '';
			if (!this.isOrderIng) {
				type = 'look';
			} else if (ins == 'up') {
				type = 'look';
			} else if (ins == 'down' && this.orderinfo.quotationPayStatus == 1 && this.orderinfo.userPayStatus == 1) {
				type = 'look';
			} else {
				type = 'handle';
			}
			let obj = {
				id: this.orderinfo.id,
				paymentType: this.orderinfo.paymentType,
				paymentName: this.orderinfo.paymentName,
				paymentAccount: this.orderinfo.paymentAccount,
				paymentBank: this.orderinfo.paymentBank,
				paymentBankChild: this.orderinfo.paymentBankChild,
				type
			};
			uni.navigateTo({
				url: `/pages/index/newpage/setpayment?obj=` + encodeURIComponent(JSON.stringify(obj))
			});
		},
		openpop(u) {
			if (u.id == this.orderinfo.userId) {
				this.wxchat = this.orderinfo.userWechat;
				this.phone = this.orderinfo.userPhone;
			} else {
				this.wxchat = this.orderinfo.quotationWechat;
				this.phone = this.orderinfo.quotationPhone;
			}
			this.$refs.popupWxchat.open();
		}
	}
};
</script>

<style lang="scss">
page {
	background: linear-gradient(180deg, #fff2e9 0%, #fffefe 100%);
}

.videoads {
	width: 710rpx;

	video {
		width: 710rpx;
		height: 660rpx;
	}
}

.spanopen {
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #3191ff;
	text-decoration-line: underline;
	margin-left: 15rpx;
}

.isred {
	color: red !important;
}

.isgreen {
	color: #54bd6a !important;
}

.isg {
	color: #ff6f07 !important;
}

.popuptest {
	width: 640rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 30rpx 30rpx;
	box-sizing: border-box;

	.icon {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #000000;
		text-align: center;
	}

	.content {
		width: 580rpx;
		background: #f9f9f9;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 26rpx;
		box-sizing: border-box;
		margin-top: 25rpx;
		font-size: 28rpx;
	}

	.tit {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #11192d;
		margin-top: 20rpx;
	}

	.imgList {
		display: flex;
		margin-top: 20rpx;

		.items {
			margin-right: 15rpx;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 6rpx;
			}
		}

		.ivideo {
			width: 80rpx;
			height: 80rpx;
			border-radius: 6rpx;
			position: relative;

			.ivideo_ads {
				position: absolute;
				top: 0;
				width: 80rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 6rpx;
				background: rgba(0, 0, 0, 0.3);

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
}

.popup1 {
	width: 640rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 30rpx 20rpx;
	box-sizing: border-box;

	.icon {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #000000;
		text-align: center;
	}
	.sbutit {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #11192d;
		padding: 0rpx 60rpx;
		text-align: center;
	}
	.itt {
		width: 560rpx;
		height: 140rpx;
		background: #f9f9f9;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 30rpx auto;
		padding: 20rpx 26rpx;
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #11192d;
		.xb {
			color: #ff6f07;
			margin-left: 20rpx;
		}
	}

	.conts {
		margin: 28rpx auto;
		padding: 0rpx 10rpx;
		box-sizing: border-box;
		image {
			width: 120rpx;
			height: 120rpx;
		}
		.tss {
			flex: 1;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666;
			margin-left: 30rpx;
		}
	}

	.texts {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #979797;
		margin: 30rpx auto;

		span {
			color: #ff6f07;
		}
	}

	.input {
		input {
			width: 570rpx;
			height: 68rpx;
			background: #ffffff;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 1px solid #d1d1d6;
			line-height: 68rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000;
			padding-left: 20rpx;
		}
	}

	.btnss {
		margin: 40rpx auto;

		.bt {
			width: 260rpx;
			height: 90rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			text-align: center;
			line-height: 90rpx;
		}
		.b_l {
			background: #f9f9f9;
			color: #d1cdcd;
		}
		.b_r {
			background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
			color: #fff;
		}
	}

	.content {
		max-height: 650rpx;
		overflow: auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #11192d;
		margin-top: 20rpx;
	}

	.btn {
		width: 320rpx;
		height: 90rpx;
		background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #ffffff;
		text-align: center;
		line-height: 90rpx;
		margin: 30rpx auto 0rpx;
	}
}

.footer_btns {
	width: 750rpx;
	min-height: 120rpx;
	background: #ffffff;
	box-shadow: 0rpx 1px 10rpx 0rpx rgba(0, 0, 0, 0.2);
	position: fixed;
	bottom: 0%;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 9;

	.cont {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		min-height: 120rpx;
		color: #000000;
		box-sizing: border-box;

		.btn33 {
			width: 690rpx;
			height: 100rpx;
			border-radius: 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			line-height: 100rpx;
			text-align: center;
			background: #d1d1d6;
			color: #fff;
			margin: 20rpx auto;
		}

		.btn {
			width: 690rpx;
			height: 100rpx;
			border-radius: 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			line-height: 100rpx;
			text-align: center;
			background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
			color: #fff;
			margin: 20rpx auto;
		}

		.btn1 {
			width: 690rpx;
			margin: 20rpx auto;
			height: 40rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #ff6f07;
			line-height: 40rpx;

			.bbb {
				padding: 0;
				border: none;
				background-color: transparent;
				height: 40rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #ff6f07;
				line-height: 40rpx;
			}

			.bbb::after {
				border: none;
			}
		}

		.on {
			opacity: 0.54 !important;
		}
	}
}

.block_1 {
	width: 750rpx;
	height: 340rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	position: relative;

	.tit {
		width: 750rpx;
		height: 96rpx;
		background: linear-gradient(350deg, #ffffff 20%, rgba(255, 231, 213, 0.53) 100%);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		border-top: 2rpx solid #ffffff;
	}

	.block_1_ads {
		width: 750rpx;
		height: 340rpx;
		position: absolute;
		top: 0%;
		padding: 28rpx 20rpx;
		box-sizing: border-box;

		.block_1_top {
			.tx_flex {
				display: flex;
			}

			.tx {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}

			.tx_right {
				flex: 1;
				margin-left: 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.name_flex {
				display: flex;
				justify-content: space-between;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #11192d;

				image {
					width: 92rpx;
					height: 32rpx;
				}

				span {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #3191ff;
					text-align: left;
					font-style: normal;
					text-decoration-line: underline;
					margin-left: 20rpx;
				}
			}

			.text_flex {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;
				display: flex;
				align-items: center;

				.icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
		}

		.contents {
			.items {
				width: 710rpx;
				height: 80rpx;
				background: #f9f9f9;
				border-radius: 15rpx;
				margin: 20rpx auto;
				padding: 20rpx 26rpx;
				box-sizing: border-box;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #11192d;
			}

			.btn {
				// max-width: 108rpx;
				height: 48rpx;
				background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #ffffff;
				text-align: center;
				line-height: 48rpx;
				padding: 0rpx 15rpx;
			}
		}

		.kong {
			image {
				width: 184rpx;
				height: 124rpx;
			}

			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			text-align: center;
		}
	}
}

.block_s {
	margin: 20rpx 0rpx;

	.tit {
		width: 750rpx;
		height: 96rpx;
		background: linear-gradient(90deg, #ff8c3a 0%, #ffe2cd 100%);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		border-top: 1px solid #ffffff;
		padding: 22rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.tit_left {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #ffffff;
			display: flex;
		}

		.text_right {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #11192d;
		}
	}

	.tit_cent {
		width: 750rpx;
		height: 160rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-top: -20rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.ut1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #979797;
		}

		.btn {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #ff6f07;
			margin-left: 20rpx;
		}

		.price {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #11192d;

			span {
				font-size: 20rpx;
				margin-left: 10rpx;
			}
		}

		.tit_cent1 {
			margin-top: 15rpx;

			.tit_left {
				image {
					width: 68rpx;
					height: 68rpx;
					border-radius: 12rpx;
				}

				.name {
					margin-left: 20rpx;
					width: 270rpx;
					height: 68rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #11192d;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2; //几行就填几
					-webkit-box-orient: vertical;
				}
			}

			.tit_right {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #979797;
				text-align: right;
			}
		}
	}
}
</style>
